<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>

<div id="container">
    <div class="toggle" href="#">More Info (Address)
        <span class="info">
				This is more information
			</span>
    </div>
    <div class="toggle" href="#">
        Even More Info (Map)
        <span class="info">
				<iframe src="http://www.map-generator.net/extmap.php?name=London&amp;address=london%2C%20england"/>
			</span>
    </div>
</div>

<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/module.js" type="text/javascript" charset="utf-8"></script>
<script src="js/modulevarient.js" type="text/javascript" charset="utf-8"></script>
<script src="js/类式继承.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    basketModule.addItem({
        item: "bread",
        price: 0.5
    });

    basketModule.addItem({
        item: "butter",
        price: 0.3
    });

    console.log(basketModule.getItemCount());
    console.log(basketModule.getTotal());

    //however,the following will not work:
    //because the basket itself is not exposed as a part of our
    //outputs:undefined
    //console.log(basketModule.basket);

    //myMoudule.publicMethod()


    //js中this指代对象
    //如果是声明式的函数和匿名函数则this指代的是window对象
    //其它this指向的是刚创建的对象
    function Super() {
        this.colors = ["red", "blue"];
    }

    function Sub(name) {
        this.name = name;     //定义sub当前对象的name属性
        console.log(this);  //this指代是实例化的对象
        Super.call(this, name);  //将super对象函数作用域变为sub对象的作用的域，并传递参数name
        console.log(name); //调用的是name参数值
        console.log(this.name);  //调用的是sub对象的this.name属性
    }

    var sub = new Sub("tom");
    console.log(sub);

    var stateManager = {
        fly: function () {
            var self = this;
            $("#container").unbind().on("click", function (e) {
                var target = $(e.originalTarget || e.srcElement);
                if (target.is("div.toggle")) {
                    self.handleClick(target);
                }
            });
        },
        handleClick: function (elem) {
            elem.find("span").toggle("slow");
        }
    };

    $("div").on("click", function () {
        console.log("You clicked: " + $(this).attr("id"));
    });
    // we should avoid using the DOM element to create a
    // jQuery object (with the overhead that comes with it)
    // and just use the DOM element itself like this:
    $("div").on("click", function () {
        console.log("You clicked:" + this.id);
    });

    $("a").map(function () {
        return $(this).text();
    });

    jQuery.single = (function (o) {
        var collection = jQuery([1]);
        return function (element) {
            // Give collection the element:
            collection[0] = element;
            // Return the collection:
            return collection;
        };
    });

    $("div").on("click", function () {
        var html = jQuery.single(this).next().html();
        console.log(html);
    });

</script>

</body>
</html>
